<template>
    <div>
        <!--头部+banner-->
        <div class="a-1">
            <!--顶部导航-->
            <div class="a-2">
                <div class="a-3">
                    <Header v-bind:state=0></Header>
                </div>
            </div>
            <!--banner-->
            <div class="target a-9" id="target-2">
                <div>
                    <div><img src="@/assets/image/ny_banner1.png"></div>
                </div>
            </div>
            <!--内页详情-->
            <div class="c-1">
                <div class="c-2">
                    <div class="b-8 c-3">
                        <div class="b-9">当前位置： <a href="javascript:;">首页</a> > <a href="javascript:;">作品详情</a></div>
                    </div>
                    <div class="c-4">
                        <div class="c-5">
                            <div class="swiper-container swiper-containerTow">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide"><img class="c-6" src="@/assets/image/show_img1.png"/></div>
                                    <div class="swiper-slide"><img class="c-6" src="@/assets/image/show_img1.png"/></div>
                                    <div class="swiper-slide"><img class="c-6" src="@/assets/image/show_img1.png"/></div>
                                </div>
                                <!-- 如果需要分页器 -->
                                <div class="pagination"></div>
                            </div>
                            <div class="a-28 c1-7"><span>部分转让</span></div>
                        </div>
                        <div class="c-7">
                            <div class="c-8">作品一作品一作品一作品一</div>
                            <div class="c-9 c-13">
                                <div class="c-10">
                                    <span class="c-11">价&emsp;&emsp;格：</span>
                                    <span class="c-11 c-12">面议</span>
                                </div>
                                <div class="c-10">
                                    <span class="c-11">发布时间：</span>
                                    <span class="c-11">2020-02-02</span>
                                </div>
                            </div>
                            <div class="c-9 c-14">
                                <div class="c-10">
                                    <span class="c-11">所在地区：</span>
                                    <span class="c-11">武汉市-洪山区</span>
                                </div>
                                <div class="c-10">
                                    <span class="c-11">作品类型：</span>
                                    <span class="c-11">摄影</span>
                                </div>
                            </div>
                            <div class="c-9 c-14">
                                <div class="c-10">
                                    <span class="c-11">公司成立时间：</span>
                                    <span class="c-11">4年</span>
                                </div>
                                <div class="c-10">
                                    <span class="c-11">代理机构：</span>
                                    <span class="c-11">华中国家版权交易中心</span>
                                </div>
                            </div>
                            <div class="c1-15">
                                <a class="c-15" href="javascript:;">立即咨询</a>
                                <span class="c1-16"><i></i><span>收藏</span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--消息通知-->
            <div class="a-14">
                <div class="a-15">
                    <img class="a-16" src="@/assets/image/tz.png" />
                    <div class="a-17">
                        <div class="swiper-container swiper-containerOne">
                            <div class="swiper-wrapper clearfix">
                                <div class="swiper-slide"><a href="javascipt:;">消息通知消息通知消息消息通知消息通知消息</a></div>
                                <div class="swiper-slide"><a href="javascipt:;">消息通知消息通知消息消息通知消息通知消息</a></div>
                                <div class="swiper-slide"><a href="javascipt:;">消息通知消息通知消息消息通知消息通知消息</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--内容-->
        <div class="c-16">
            <div class="c-17">
                <div class="c-18">
                    <ul class="c-19">
                        <li :class="type==1?'active':''" @click="changeType(1)"><span>详细说明</span></li>
                        <li :class="type==2?'active':''" @click="changeType(2)"><span>作品样片</span></li>
                        <li :class="type==3?'active':''" @click="changeType(3)"><span>常见问题</span></li>
                    </ul>
                </div>
                <div class="c-20">
                    <div class="c-21" v-if="type==1">
                        <div class="c-22">
                            <div class="c-23">
                                <div class="c-24">挂牌信息</div>
                            </div>
                            <ul class="c-25">
                                <li>
                                    <div class="c-26">作品名称：</div>
                                    <div class="c-27">
                                        <div class="c1-27"><span>作品一作品一作品一作品一</span></div>
                                    </div>
                                </li>
                                <li>
                                    <div class="c-26">作品类别：</div>
                                    <div class="c-27">
                                        <div class="c1-27"><span>摄影</span></div>
                                    </div>
                                </li>
                                <li>
                                    <div class="c-26">作品信息：</div>
                                    <div class="c-27">
                                        <div class="c1-27"><label>作品类别：</label><span>图书、期刊、杂志、报纸、电影、电视剧、网剧、综艺、脱口秀、纪录片、专题片、动漫、少儿、MTV</span></div>
                                        <div class="c1-27"><label>题&emsp;&emsp;材：</label><span>古装、搞笑、爱情、偶像、武侠、青春、家庭、都市、农村、军旅</span></div>
                                        <div class="c1-27"><label>地&emsp;&emsp;区：</label><span>内地、美国、英国、韩国、日本、法国、德国、港台、其他</span></div>
                                    </div>
                                </li>
                                <li>
                                    <div class="c-26">著作权人：</div>
                                    <div class="c-27">
                                        <div class="c1-27"><span>徐爽爽爽爽</span><span>身份证：420222********26 </span><span>国籍：中国</span><span>省份：湖北省</span><span>城市：武汉</span></div>
                                    </div>
                                </li>
                                <li>
                                    <div class="c-26">作品创作性质：</div>
                                    <div class="c-27">
                                        <div class="c1-27"><span>原创</span><label style="margin-left: -25px;">(备注：我是小备注，我是小备注，我是小备注，我是小备注，我是小备注，我是小备注。)</label></div>
                                    </div>
                                </li>
                                <li>
                                    <div class="c-26">创作完成日期：</div>
                                    <div class="c-27">
                                        <div class="c1-27"><span>2020-02-02</span></div>
                                    </div>
                                </li>
                                <li>
                                    <div class="c-26">创作完成地点：</div>
                                    <div class="c-27">
                                        <div class="c1-27"><span>湖北武汉</span></div>
                                    </div>
                                </li>
                                <li>
                                    <div class="c-26">发行地区：</div>
                                    <div class="c-27">
                                        <div class="c1-27"><span>湖北武汉</span></div>
                                    </div>
                                </li>
                                <li>
                                    <div class="c-26">主要创作人员：</div>
                                    <div class="c-27">
                                        <div class="c1-27"><span>徐爽爽一号</span><span>徐爽爽二号</span></div>
                                    </div>
                                </li>
                                <li>
                                    <div class="c-26">作品权益类型：</div>
                                    <div class="c-27">
                                        <div class="c1-27"><span>发表权&emsp;署名权&emsp;修改权&emsp;保护作品完整权&emsp;复制权&emsp;发行权&emsp;出租权&emsp;展览权&emsp;表演权&emsp;放映权&emsp;广播权</span></div>
                                    </div>
                                </li>
                                <li>
                                    <div class="c-26">发表状态：</div>
                                    <div class="c-27">
                                        <div class="c1-27"><span>未发表</span><span>未发表</span><span>首次发表日期：2020-02-02</span><span>发表地点：湖北武汉</span><span>国家：中国</span><span>城市：武汉</span></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="c-22">
                            <div class="c-23">
                                <div class="c-24">标的信息</div>
                            </div>
                            <ul class="c-25">
                                <li>
                                    <div class="c-26">著作权人权利拥有状况：</div>
                                    <div class="c-27">
                                        <div class="c1-27"><span>全部</span></div>
                                    </div>
                                </li>
                                <li>
                                    <div class="c-26">挂牌标的：</div>
                                    <div class="c-27"><span>发表权&emsp;署名权&emsp;修改权&emsp;保护作品完整权&emsp;复制权&emsp;发行权&emsp;出租权&emsp;展览权&emsp;表演权&emsp;放映权&emsp;广播权</span></div>
                                </li>
                                <li>
                                    <div class="c-26">许可方式：</div>
                                    <div class="c-27">
                                        <div class="c1-27"><span>专有</span></div>
                                    </div>
                                </li>
                                <li>
                                    <div class="c-26">许可期限：</div>
                                    <div class="c-27">
                                        <div class="c1-27"><span>永久</span></div>
                                    </div>
                                </li>
                                <li>
                                    <div class="c-26">许可区域：</div>
                                    <div class="c-27">
                                        <div class="c1-27"><span>无</span></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="c-22">
                            <div class="c-23">
                                <div class="c-24">作品简介</div>
                            </div>
                            <div class="c-37">
                                <p>书籍的历史和文字、语言、文学、艺术、技术和科学的发展，有着紧密的联系。它最早可追溯于石、木、陶器、青铜、棕榈树叶、骨、白桦树皮等物上的铭刻。将纸莎草用
                                    于写字，对书籍的发展起了巨大的推动作用。约在公元前30世纪，埃及纸草书卷的出现，是最早的埃及书籍雏形。纸草书卷比苏美尔、巴比伦、亚述和赫梯人的泥版书更接近于
                                    现代书籍的概念</p>
                                <p>中国最早的正式书籍，是约在公元前 8世纪前后出现的简策。西晋杜预在《春秋经传集解序》中说：“大事书之于策，小事简牍而已。”这种用竹木做书写材料的“简策”
                                    (或“简牍)，在纸发明以前，是中国书籍的主要形式。将竹木削制成狭长的竹片或木片，统称为简，稍宽长方形木片叫“ 方”。若干简编缀在一起叫“策”(册)又称为“简策”，
                                    编缀用的皮条或绳子叫“编”。</p>
                            </div>
                        </div>
                        <div class="c-28">
                            <div class="c-23">
                                <div class="c-24 c-29">对摘牌方资质要求</div>
                            </div>
                            <div class="c-37">
                                <ul class="c-38">
                                    <li><img class="c-39" src="@/assets/image/zl_img1.png"/></li>
                                    <li><img class="c-39" src="@/assets/image/zl_img1.png"/></li>
                                    <li><img class="c-39" src="@/assets/image/zl_img1.png"/></li>
                                </ul>
                            </div>
                        </div>
<!--                        <div class="c-28">-->
<!--                            <div class="c-23">-->
<!--                                <div class="c-24">证明文件</div>-->
<!--                            </div>-->
<!--                            <div class="c-37">-->
<!--                                <ul class="c-38">-->
<!--                                    <li><img class="c-39" src="@/assets/image/zi_img2.png"/></li>-->
<!--                                </ul>-->
<!--                            </div>-->
<!--                        </div>-->
                        <div class="c-28">
                            <div class="c-23">
                                <div class="c-24 c-29">对摘牌方资质要求</div>
                            </div>
                            <form class="c-30">
                                <div class="c-31">
                                    <span class="c-32">说明：对摘牌的要求，要求要求要求要求要求要求要求要求</span>
<!--                                    <textarea class="c-33" placeholder="请输入您的说明"></textarea>-->
                                </div>
<!--                                <div class="c-31">-->
<!--                                    <span class="c-32">图片要求：</span>-->
<!--                                    <div class="c-34">-->
<!--                                        <div class="c-35">-->
<!--                                            <img src="@/assets/image/add.png" />-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
                                <div class="c-40"><label class="b-14"><input name="assignment" type="checkbox" value="" />我已阅读并同意</label><a class="c-41" href="javascript:;">《摘牌协议书》</a></div>
                                <button class="c-36" @click="delistApply">申请摘牌</button>
                            </form>
                        </div>
                    </div>

                    <div class="c-21" v-if="type==2">
                        <div class="c-22">
                            <div class="c-23">
                                <div class="c-24">作品样片</div>
                            </div>
                            <div class="c-42">
                                <div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1033px; height: 855px; ">
                                    <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
                                        <img data-u="image" src="@/assets/image/show_img1.png" />
                                    </div>

                                    <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1033px; height: 720px;">
                                        <div data-p="144.50" >
                                            <img data-u="image" src="@/assets/image/show_img1.png" />
                                            <img data-u="thumb" src="@/assets/image/show_img1.png" />
                                        </div>
                                    </div>

                                    <div data-u="thumbnavigator" class="jssort01" style="position:absolute;left:0px;bottom:0px;width:1033px;height:127px;" data-autocenter="1">

                                        <div data-u="slides" style="cursor: default;">
                                            <div data-u="prototype" class="p">
                                                <div class="w">
                                                    <div data-u="thumbnailtemplate" class="t"></div>
                                                </div>
                                                <div class="c"></div>
                                            </div>
                                        </div>

                                    </div>

                                    <span data-u="arrowleft" class="jssora05l" style="top:158px;left:8px;width:40px;height:40px;"></span>
                                    <span data-u="arrowright" class="jssora05r" style="top:158px;right:8px;width:40px;height:40px;"></span>
                                </div>
                            </div>
                        </div>
                    </div>



                    <div class="c-21" v-if="type==3">
                        <div class="c-22">
                            <div class="c-23">
                                <div class="c-24">挂牌信息</div>
                            </div>
                            <div class="c-43">
                                <ul class="c-44">
                                    <li>
                                        <div class="c-45">
                                            <span class="c-46">问题一：</span>
                                            <span class="c-47">天气好，能否出门晒太阳杀灭新型冠状病毒？</span>
                                        </div>
                                        <div class="c-48">
                                            <span class="c-49">不可以。</span>
                                            <span class="c-50">太阳的照射温度无法达到56度，如果要外出，需佩戴好口罩以及必要的防护，避开人群密集地方。</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="c-45">
                                            <span class="c-46">问题二：</span>
                                            <span class="c-47">天气好，能否出门晒太阳杀灭新型冠状病毒？</span>
                                        </div>
                                        <div class="c-48">
                                            <span class="c-49">不可以。</span>
                                            <span class="c-50">太阳的照射温度无法达到56度，如果要外出，需佩戴好口罩以及必要的防护，避开人群密集地方。太阳的照射温度无法达到56度，如果要外出，
需佩戴好口罩以及必要的防护，避开人群密集地方。</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="c-45">
                                            <span class="c-46">问题三：</span>
                                            <span class="c-47">天气好，能否出门晒太阳杀灭新型冠状病毒？</span>
                                        </div>
                                        <div class="c-48">
                                            <span class="c-49">不可以。</span>
                                            <span class="c-50">太阳的照射温度无法达到56度，如果要外出，需佩戴好口罩以及必要的防护，避开人群密集地方。</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="c-45">
                                            <span class="c-46">问题四：</span>
                                            <span class="c-47">天气好，能否出门晒太阳杀灭新型冠状病毒？</span>
                                        </div>
                                        <div class="c-48">
                                            <span class="c-49">不可以。</span>
                                            <span class="c-50">太阳的照射温度无法达到56度，如果要外出，需佩戴好口罩以及必要的防护，避开人群密集地方。太阳的照射温度无法达到56度，如果要外出，
需佩戴好口罩以及必要的防护，避开人群密集地方。</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from "../header";
    export default {
        name: "index",
        components: {Header},
        created(){
            console.log("获取路径上的ID");
            console.log(this.$route.query.worksId);
        },
        data(){
            return{
                type:1
            }
        },
        methods:{
            changeType(e){
                this.type=e
            },
            delistApply(){ //申请摘牌
                this.$router.push('/userIndex/delistApply');
            }
        }
    }

</script>

<style scoped>
    .c-32{display: inline-block;vertical-align: top;color: #333333;width: 1000px;text-align: left;font-size: 14px;}
    @import '../../css/index.css';
    @import '../../css/show_works.css';
    @import '../../css/idangerous.swiper.css';

</style>